<template>
  <div class="x-component-card">
    <div class="x-component-card-head">
      <div class="head-title">
        <p class="title">{{title}}</p>
        <h4 class="sub-title">{{subTitle}}</h4>
      </div>
      <div class="head-more"><span>查看更多</span></div>
    </div>
    <div class="x-component-card-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    showMore: {
      type: Boolean,
      default: true
    },
    more: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped lang="less">
.x-component-card{
  /*background-color: inherit;*/
  padding: 10px 15px;
  .x-component-card-head{
    display: flex;
    padding: 8px;
    .head-title{
      flex-grow: 6;
      .title {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
      }
      .sub-title{
        color: rgba(255, 255, 255, 0.9);
      }
    }
    .head-more{
      align-self: center;
      span{
        line-height: 30px;
        height: 30px;
        border: solid 1px rgba(255, 255, 255, 0.5);
        border-radius: 20px;
        padding: 2px 10px;
      }
    }
  }
  .x-component-card-content{
    padding-top: 8px;
  }
}
</style>
